<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>案件编号</th>
          <th>受理时间</th>
          <th>线索来源</th>
          <th>反映或涉及主要问题</th>
          <th>举报人姓名</th>
          <th>被举报人</th>
          <th>被举报人级别</th>
          <th>被举报人所在单位</th>
          <th>被举报人所属单位</th>
          <th>被举报人编号</th>
          <th>上级要求</th>
          <th>处置方式</th>
          <th>转办时间</th>
          <th>截止时间</th>
          <th>超期提醒（天）</th>
          <th>查办主体</th>
          <th>查办状态</th>
          <th>处理情况</th>
          <th>查结时间</th>
          <th>部职别</th>
          <th>人员类别</th>
          <th>问题线索类型</th>
          <th>类型</th>
          <th>重信</th>
          <th>数量</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="detail in disciplineDetails" :key="detail.id">
          <td>{{ detail.case_id }}</td>
          <td>{{ detail.accept_time }}</td>
          <td>{{ detail.source ? detail.source.name : '' }}</td>
          <td>{{ detail.problem }}</td>
          <td>{{ detail.provider_name }}</td>
          <td>{{ detail.unit_number ? detail.unit_number.name : '' }}</td>
          <td>{{ detail.target_level }}</td>
          <td>{{ detail.target_unit }}</td>
          <td>{{ detail.belong_unit }}</td>
          <td>{{ detail.target_id_number }}</td>
          <td>{{ detail.superior_request }}</td>
          <td>{{ detail.processing ? detail.processing.name : '' }}</td>
          <td>{{ detail.transfers_limit }}</td>
          <td>{{ detail.deadline }}</td>
          <td>{{ detail.overdue_reminders }}</td>
          <td>{{ detail.processing_subject ? detail.processing_subject.name : '' }}</td>
          <td>{{ detail.processing_status ? detail.processing_status.name : '' }}</td>
          <td>{{ detail.final_result }}</td>
          <td>{{ detail.final_time }}</td>
          <td>{{ detail.dept_level }}</td>
          <td>{{ detail.personnel_category ? detail.personnel_category.name : '' }}</td>
          <td>{{ detail.question_type.map(type => type.name).join(', ') }}</td>
          <td>{{ detail.report_type }}</td>
          <td>{{ detail.zhong_xin }}</td>
          <td>{{ detail.number }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      disciplineDetails: []
    };
  },
  created() {
    this.fetchDisciplineDetails();
  },
  methods: {
    async fetchDisciplineDetails() {
      try {
        const response = await axios.get('/api/DisciplineDetail');
        this.disciplineDetails = response.data;
      } catch (error) {
        console.error('Error fetching discipline details:', error);
      }
    }
  }
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #f1f1f1;
}
</style>
